<template>
  <div class="approval-page">
    <h1>我的审批</h1>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <input type="text" placeholder="搜索申请人、部门或业务类型" v-model="searchQuery" />
      <button @click="searchApplications">搜索</button>
    </div>

    <!-- 待审批列表 -->
    <div class="approval-list">
      <div v-for="application in filteredApplications" :key="application.id" class="approval-item">
        <div class="item-title">{{ application.title }}</div>
        <button @click="selectApplication(application)">办理</button>
      </div>
    </div>

    <!-- 审批操作模态框 -->
    <div v-if="selectedApplication" class="approval-modal">
      <h2>{{ selectedApplication.title }} - 审批操作</h2>
      <div v-if="selectedApplication.type === 'overtime'" class="approval-details">
        <p>姓名: {{ selectedApplication.name }}</p>
        <p>加班类型: {{ selectedApplication.typeDetail }}</p>
        <p>加班时间: {{ selectedApplication.time }}</p>
        <p>事由: {{ selectedApplication.reason }}</p>
        <p>加班日期: {{ selectedApplication.date }}</p>
      </div>
      <div v-if="selectedApplication.type === 'leave'" class="approval-details">
        <p>申请人: {{ selectedApplication.name }}</p>
        <p>事由: {{ selectedApplication.reason }}</p>
        <p>请假类型: {{ selectedApplication.leaveType }}</p>
        <p>共计天数: {{ selectedApplication.totalDays }}</p>
        <p>节假日: {{ selectedApplication.holidays }}</p>
        <p>上传证明: <a :href="selectedApplication.evidenceUrl" target="_blank">查看证明</a></p>
      </div>
      <div v-if="selectedApplication.type === 'cancelLeave'" class="approval-details">
        <p>申请人: {{ selectedApplication.name }}</p>
        <p>申请部门: {{ selectedApplication.department }}</p>
        <p>公休剩余天数: {{ selectedApplication.remainingVacationDays }}</p>
        <p>销假日期: {{ selectedApplication.leaveDate }}</p>
        <p>销假开始时间: {{ selectedApplication.startTime }}</p>
        <p>销假结束时间: {{ selectedApplication.endTime }}</p>
      </div>
      <div v-if="selectedApplication.type === 'businessTrip'" class="approval-details">
        <p>出差人员: {{ selectedApplication.personnel }}</p>
        <p>出差地点: {{ selectedApplication.location }}</p>
        <p>出差时间: {{ selectedApplication.startDate }} 至 {{ selectedApplication.endDate }}</p>
        <p>返回日期: {{ selectedApplication.returnDate }}</p>
        <p>经费来源: {{ selectedApplication.fundingSource }}</p>
        <p>交通工具: {{ selectedApplication.transport }}</p>
        <p>出差事由: {{ selectedApplication.reason }}</p>
      </div>
      <div v-else-if="selectedApplication.type === 'personalTravel'" class="approval-details">
        <p>姓名: {{ selectedApplication.name }}</p>
        <p>开始日期: {{ selectedApplication.startDate }}</p>
        <p>结束日期: {{ selectedApplication.endDate }}</p>
        <p>原因: {{ selectedApplication.reason }}</p>
        <p>是否查看承诺书: {{ selectedApplication.seenPromise ? '是' : '否' }}</p>
        <p>性别: {{ selectedApplication.gender }}</p>
        <p>出生年月: {{ selectedApplication.birthDate }}</p>
        <p>政治面貌: {{ selectedApplication.politicalStatus }}</p>
        <p>工作单位: {{ selectedApplication.workUnit }}</p>
        <p>出国（境）类型: {{ selectedApplication.travelType }}</p>
        <p>职务（职称）: {{ selectedApplication.position }}</p>
        <p>涉密程度: {{ selectedApplication.classification }}</p>
        <p>护照号码: {{ selectedApplication.passportNumber }}</p>
        <p>出国（境）目的: {{ selectedApplication.purpose }}</p>
        <p>出国（境）审批编号: {{ selectedApplication.approvalNumber }}</p>
        <p>组团单位: {{ selectedApplication.groupUnit }}</p>
        <p>前往国家（地区）: {{ selectedApplication.destination }}</p>
        <p>出国（境）情况: {{ selectedApplication.travelDetails }}</p>
        <div v-if="selectedApplication.itinerary.length > 0">
          <h4>国（境）外行程</h4>
          <ul>
            <li v-for="行程 in selectedApplication.itinerary" :key="行程.date">
              {{ 行程.date }} - {{ 行程.location }} - {{ 行程.events }}
            </li>
          </ul>
        </div>
        <p>附件: <a :href="selectedApplication.attachmentUrl" target="_blank">下载附件</a></p>
      </div>
      <div v-if="selectedApplication.type === 'offDuty'" class="approval-details">
        <p>部门: {{ selectedApplication.department }}</p>
        <p>人员: {{ selectedApplication.personnel }}</p>
        <p>身份证号: {{ selectedApplication.idNumber }}</p>
        <p>专业: {{ selectedApplication.specialty }}</p>
        <p>入职日期: {{ selectedApplication.startDate }}</p>
        <p>离岗日期: {{ selectedApplication.endDate }}</p>
        <p>性别: {{ selectedApplication.gender }}</p>
      </div>
      <div v-if="selectedApplication.type === 'reception'" class="approval-details">
        <p>姓名: {{ selectedApplication.name }}</p>
        <p>所在部门: {{ selectedApplication.department }}</p>
        <p>职务: {{ selectedApplication.position }}</p>
        <p>人员类别: {{ selectedApplication.personnelType }}</p>
        <p>离岗类别: {{ selectedApplication.offDutyType }}</p>
        <div v-if="selectedApplication.department === '网管'">
          <p>门卡: {{ selectedApplication.accessCard }}</p>
          <p>其他设备: {{ selectedApplication.otherDevices }}</p>
          <p>备注: {{ selectedApplication.notes }}</p>
        </div>
        <div v-if="selectedApplication.department === '档案室'">
          <p>是否有向档案室借阅资料: {{ selectedApplication.borrowed ? '是' : '否' }}</p>
          <p>是否已全部归还: {{ selectedApplication.returned ? '是' : '否' }}</p>
        </div>
        <div v-if="selectedApplication.department === '财务部'">
          <p>是否有借款: {{ selectedApplication.hasLoan ? '是' : '否' }}</p>
          <p>是否还清: {{ selectedApplication.loanCleared ? '是' : '否' }}</p>
          <p>其他说明: {{ selectedApplication.financialNotes }}</p>
        </div>
        <div v-if="selectedApplication.department === '办公室'">
          <p>是否签订离岗保密承诺书: {{ selectedApplication.signedNonDisclosure ? '是' : '否' }}</p>
        </div>
        <div v-if="selectedApplication.department === '所在部门'">
          <p>是否已交接清楚全部资料: {{ selectedApplication.handedOver ? '是' : '否' }}</p>
          <p>工作其他说明: {{ selectedApplication.otherWorkNotes }}</p>
        </div>
        <p>离岗日期: {{ selectedApplication.offDutyDate }}</p>
      </div>
      <div v-if="selectedApplication.type === 'reimbursement'" class="approval-details">
        <p>填报日期: {{ selectedApplication.submissionDate }}</p>
        <p>部门: {{ selectedApplication.department }}</p>
        <p>姓名: {{ selectedApplication.name }}</p>
        <p>报销事由: {{ selectedApplication.reason }}</p>
        <p>报销金额（小写）: {{ selectedApplication.amount }}</p>
        <p>报销金额（大写）: {{ selectedApplication.amountInWords }}</p>
        <div class="receipts">
          <p v-for="receipt in selectedApplication.receipts" :key="receipt.id">
            <img :src="receipt.url" alt="Receipt" />
          </p>
        </div>
      </div>
      <div v-if="selectedApplication.type === 'businessReimbursement'" class="approval-details">
        <h3>出差申请单</h3>
        <p>申请人: {{ selectedApplication.name }}</p>
        <p>出差地点: {{ selectedApplication.location }}</p>
        <p>出差日期: {{ selectedApplication.startDate }} 至 {{ selectedApplication.endDate }}</p>
        <p>返回日期: {{ selectedApplication.returnDate }}</p>
        <p>经费来源（金额）: {{ selectedApplication.fundingSource }}</p>
        <p>交通工具: {{ selectedApplication.transport }}</p>
        <p>出差事由: {{ selectedApplication.reason }}</p>

        <h3>旅差费报销单</h3>
        <p>申请人: {{ selectedApplication.name }}</p>
        <p>出差开始日期和结束日期: {{ selectedApplication.startDate }} 至 {{ selectedApplication.endDate }}</p>
        <p>总金额（小写）: {{ selectedApplication.totalAmount }}</p>
        <p>总金额（大写）: {{ selectedApplication.totalAmountInWords }}</p>
        <table>
          <thead>
          <tr>
            <th>开始日期</th>
            <th>结束日期</th>
            <th>出差地点</th>
            <th>车船费</th>
            <th>住宿费</th>
            <th>途中补助费</th>
            <th>住勤费</th>
            <th>合计小写</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>{{ selectedApplication.startDate }}</td>
            <td>{{ selectedApplication.endDate }}</td>
            <td>{{ selectedApplication.location }}</td>
            <td>{{ selectedApplication.travelCost }}</td>
            <td>{{ selectedApplication.accommodationCost }}</td>
            <td>{{ selectedApplication.subsidy }}</td>
            <td>{{ selectedApplication.dailyAllowance }}</td>
            <td>{{ selectedApplication.totalAmount }}</td>
          </tr>
          </tbody>
        </table>

        <h3>报销单据</h3>
        <div class="receipts">
          <p v-for="receipt in selectedApplication.receipts" :key="receipt.id">
            <img :src="receipt.url" alt="Receipt" />
          </p>
        </div>

        <h3>补助</h3>
        <p>共计出差人数: {{ selectedApplication.personnelCount }}</p>
        <p>出差是否全程开车: {{ selectedApplication.isDriving ? '是' : '否' }}</p>
        <p>交通补助: {{ selectedApplication.transportSubsidy }}</p>
        <p>伙食补助: {{ selectedApplication.foodSubsidy }}</p>

      </div>
      <div v-if="selectedApplication.type === 'subsidy'" class="approval-details">
        <h3>费用申请信息</h3>
        <p>加班类型: {{ selectedApplication.overtimeType }}</p>
        <p>编外外聘人员数: {{ selectedApplication.contractorCount }}</p>
        <p>在岗人数: {{ selectedApplication.onDutyCount }}</p>
        <p>未在岗人数:
          <span>{{ selectedApplication.offDutyCount.leave }} 休假</span>
          <span>{{ selectedApplication.offDutyCount.training }} 脱产学习</span>
          <span>{{ selectedApplication.offDutyCount.other }} 其他</span>
        </p>
        <p>正常工作日加班总小时数: {{ selectedApplication.totalOvertimeHours }}</p>
        <p>加班费总额: {{ selectedApplication.totalOvertimePay }}</p>
        <p>意见: {{ selectedApplication.opinion }}</p>

        <h3>加班明细表</h3>
        <table>
          <thead>
          <tr>
            <th>姓名</th>
            <th>加班类型</th>
            <th>加班时间</th>
            <th>事由</th>
            <th>加班日期</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="detail in selectedApplication.overtimeDetails" :key="detail.name">
            <td>{{ detail.name }}</td>
            <td>{{ detail.type }}</td>
            <td>{{ detail.hours }} 小时</td>
            <td>{{ detail.reason }}</td>
            <td>{{ detail.date }}</td>
          </tr>
          </tbody>
        </table>

        <h3>加班部门汇总表</h3>
        <table>
          <thead>
          <tr>
            <th>姓名</th>
            <th>部门</th>
            <th>正常工作日加班</th>
            <th>休息日加班</th>
            <th>节假日加班</th>
            <th>总计</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="summary in selectedApplication.departmentSummary" :key="summary.name">
            <td>{{ summary.name }}</td>
            <td>{{ summary.department }}</td>
            <td>{{ summary.workdayHours }}</td>
            <td>{{ summary.restdayHours }}</td>
            <td>{{ summary.holidayHours }}</td>
            <td>{{ summary.totalHours }}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div v-if="selectedApplication.type === 'payment'" class="approval-details">
        <h3>基础信息</h3>
        <p>付款类型: {{ selectedApplication.paymentType }}</p>
        <p>月份: {{ selectedApplication.month }}</p>
        <p>申请部门: {{ selectedApplication.department }}</p>
        <p>经办人: {{ selectedApplication.operator }}</p>
        <p>收款人: {{ selectedApplication.recipient }}</p>
        <p>付款金额（大写）: {{ selectedApplication.amountInWords }}</p>
        <p>付款金额（小写）: {{ selectedApplication.amount }}</p>
        <p>付款事由: {{ selectedApplication.reason }}</p>

        <h3>支付申请单</h3>
        <p>类型: {{ selectedApplication.type }}</p>
        <p>付款月份及申请列表单据:</p>
        <table>
          <thead>
          <tr>
            <th>部门</th>
            <th>工作日加班</th>
            <th>休息日加班</th>
            <th>节假日加班</th>
            <th>补助总额</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>{{ selectedApplication.department }}</td>
            <td>{{ selectedApplication.workdayOvertime }}</td>
            <td>{{ selectedApplication.restdayOvertime }}</td>
            <td>{{ selectedApplication.holidayOvertime }}</td>
            <td>{{ selectedApplication.totalSubsidy }}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div v-if="selectedApplication.type === 'meeting'" class="approval-details">
        <h3>基础信息</h3>
        <p>活动接待负责人: {{ selectedApplication.host }}</p>
        <p>申请部门: {{ selectedApplication.department }}</p>
        <p>接待地点: {{ selectedApplication.location }}</p>
        <p>接待日期: {{ selectedApplication.date }}</p>
        <p>来访内容: {{ selectedApplication.purpose }}</p>
        <p>接待对象: {{ selectedApplication.visitors }}</p>
        <p>接待对象人数: {{ selectedApplication.visitorsCount }}</p>
        <p>陪同人员: {{ selectedApplication.accompany }}</p>
        <p>陪同人员人数: {{ selectedApplication.accompanyCount }}</p>
        <p>后勤保障: {{ selectedApplication.logistics }}</p>
        <div v-if="selectedApplication.needsDining">
          <p>招待类型: {{ selectedApplication.entertainmentType }}</p>
          <p>类型标准: {{ selectedApplication.typeStandard }}</p>
        </div>
      </div>
      <div v-if="selectedApplication.type === 'contractSubsidy'" class="approval-details">
        <h3>基础信息</h3>
        <p>部门: {{ selectedApplication.department }}</p>
        <p>经办人: {{ selectedApplication.operator }}</p>
        <p>人员岗姓名: {{ selectedApplication.personnelName }}</p>
        <p>日期: {{ selectedApplication.date }}</p>
        <p>时间段: {{ selectedApplication.timePeriod }}</p>
        <p>补助费: {{ selectedApplication.subsidyAmount }}</p>
        <p>提交日期: {{ selectedApplication.submissionDate }}</p>
      </div>
      <div v-if="selectedApplication.type === 'condolence'" class="approval-details">
        <h3>基础信息</h3>
        <p>申请部门: {{ selectedApplication.department }}</p>
        <p>经办人: {{ selectedApplication.operator }}</p>
        <p>收款人: {{ selectedApplication.recipient }}</p>
        <p>开户行: {{ selectedApplication.bank }}</p>
        <p>账号: {{ selectedApplication.accountNumber }}</p>
        <p>付款金额（大写）: {{ selectedApplication.amountInWords }}</p>
        <p>付款金额（小写）: {{ selectedApplication.amount }}</p>
        <p>付款事由: {{ selectedApplication.reason }}</p>
      </div>
      <textarea v-model="approvalOpinion" placeholder="请输入审批意见" required></textarea>
      <div v-if="selectedApplication.requiresSignature" class="signature-section">
        <input type="password" v-model="signaturePassword" placeholder="电子签章密码">
      </div>
      <button @click="approveApplication('approve')">通过</button>
      <button @click="approveApplication('reject')">驳回</button>
      <button @click="approveApplication('deny')">拒绝</button>
      <button @click="approveApplication('complete')">完成</button>
      <button @click="approveApplication('countersign')">会签</button>
      <button @click="approveApplication('addSign')">加签</button>
      <button @click="closeModal">取消</button>
    </div>
  </div>

</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'ApprovalPage',
  setup() {
    const applications = ref([
      // 假设这里是从后端获取的待审批单据列表
      { id: 1, title: '出警申请', type: 'patrol', requiresSignature: true },
      { id: 2, title: '加班申请', type: 'overtime', name: '张三', typeDetail: '紧急任务', time: '4小时', reason: '项目截止', date: '2024-05-24', requiresSignature: false },
      { id: 3, title: '出差申请', type: 'businessTrip', personnel: '李四', location: '北京', startDate: '2024-06-01', endDate: '2024-06-05', returnDate: '2024-06-05', fundingSource: '公司预算', transport: '飞机', reason: '商务会议', requiresSignature: true },
      { id: 4, title: '请假申请', type: 'leave', name: '王五', reason: '个人私事', leaveType: '事假', totalDays: 5, holidays: '无', evidenceUrl: 'http://example.com/evidence.pdf', requiresSignature: true },
      { id: 5, title: '销假申请', type: 'cancelLeave', name: '赵六', department: '人力资源部', remainingVacationDays: 10, leaveDate: '2024-05-29', startTime: '09:00', endTime: '17:00', requiresSignature: true },
      { id: 6, title: '个人出国申请', type: 'personalTravel', name: '周七', startDate: '2024-07-01', endDate: '2024-07-15', reason: '旅游', seenPromise: true, gender: '男', birthDate: '1990-01-01', politicalStatus: '群众', workUnit: '技术部', travelType: '旅游', position: '工程师', classification: '非涉密', passportNumber: 'G12345678', purpose: '个人旅游', approvalNumber: 'APPR-20240701', groupUnit: '自助游', destination: '法国', travelDetails: '旅游', itinerary: [{ date: '2024-07-01', location: '巴黎', events: '参观埃菲尔铁塔' }], attachmentUrl: 'http://example.com/attachment.pdf', requiresSignature: true },
      { id: 7, title: '离岗申请', type: 'offDuty', department: '研发部', personnel: '吴八', idNumber: '110105198812045678', specialty: '软件工程', startDate: '2018-08-01', endDate: '2024-07-01', gender: '男', requiresSignature: true },
      { id: 8, title: '交接待审批单', type: 'reception', name: '郑九', department: '网管', position: '技术员', personnelType: '正式员工', offDutyType: '长期离岗', accessCard: 'ABCD1234', otherDevices: '电脑、手机', notes: '无', borrowed: true, returned: false, hasLoan: true, loanCleared: false, financialNotes: '需核实', signedNonDisclosure: false, handedOver: true, otherWorkNotes: '无其他说明', offDutyDate: '2024-08-01', requiresSignature: true },
      { id: 9, title: '日常报销申请', type: 'reimbursement', submissionDate: '2024-08-01', department: '市场部', name: '孙十', reason: '市场调研', amount: 1200.50, amountInWords: '壹仟贰佰元伍角', receipts: [{ id: 1, url: 'http://example.com/receipt1.jpg' }, { id: 2, url: 'http://example.com/receipt2.jpg' }], requiresSignature: true },
      { id: 10, title: '出差报销申请', type: 'businessReimbursement', name: '钱伯', location: '上海', startDate: '2024-08-01', endDate: '2024-08-05', returnDate: '2024-08-05', fundingSource: '公司预算', transport: '飞机', reason: '客户会议', totalAmount: 5000.00, totalAmountInWords: '伍仟元整', travelCost: '1000.00', accommodationCost: '2000.00', subsidy: '500.00', dailyAllowance: '1500.00', personnelCount: 1, isDriving: false, transportSubsidy: '300.00', foodSubsidy: '200.00', receipts: [{ id: 1, url: 'http://example.com/receipt1.jpg' }, { id: 2, url: 'http://example.com/receipt2.jpg' }], requiresSignature: true },
      { id: 11, title: '员工补助费申请', type: 'subsidy', overtimeType: '法定节假日', contractorCount: 5, onDutyCount: 20, offDutyCount: { leave: 3, training: 2, other: 1 }, totalOvertimeHours: 120, totalOvertimePay: 5000.00, opinion: '同意支付', overtimeDetails: [
          { name: '张三', type: '工作日', hours: 4, reason: '项目紧急', date: '2024-08-01' },
          // ... 更多加班明细
        ], departmentSummary: [
          { name: '张三', department: '技术部', workdayHours: 10, restdayHours: 5, holidayHours: 5, totalHours: 20 },
          // ... 更多部门汇总
        ], requiresSignature: true },
      { id: 12, title: '支付申请', type: 'payment', paymentType: '员工补助费', month: '2024-08', department: '财务部', operator: '李四', recipient: '张三', amount: 5000.00, amountInWords: '伍仟元整', reason: '员工加班补助费', type: '员工补助费', workdayOvertime: '加班人数: 10, 总时: 40小时, 费用: 2000元', restdayOvertime: '加班人数: 5, 总时: 20小时, 费用: 1000元', holidayOvertime: '加班人数: 3, 总时: 12小时, 费用: 500元', totalSubsidy: '补助总额: 3500元', requiresSignature: true },
      { id: 13, title: '会议招待费申请', type: 'meeting', host: '梁主任', department: '办公室', location: '会议室A', date: '2024-09-10', purpose: '商务洽谈', visitors: '合作方代表', visitorsCount: 5, accompany: '市场部代表', accompanyCount: 3, logistics: '茶水、点心', needsDining: true, entertainmentType: '招待', typeStandard: '100元/人', requiresSignature: true },
      { id: 14, title: '外聘补助申请', type: 'contractSubsidy', department: '研发部', operator: '李四', personnelName: '张外聘', date: '2024-09-15', timePeriod: '全天', subsidyAmount: '500元', submissionDate: '2024-09-10', requiresSignature: true },
      { id: 15, title: '慰问金申请', type: 'condolence', department: '人力资源部', operator: '王五', recipient: '李四', bank: '工商银行', accountNumber: '1234567890', amount: 2000.00, amountInWords: '贰仟元整', reason: '员工家属慰问', requiresSignature: true },
      // ... 其他单据
    ]);
    const searchQuery = ref('');
    const selectedApplication = ref(null);
    const approvalOpinion = ref('');
    const signaturePassword = ref('');

    const filteredApplications = computed(() => {
      if (!searchQuery.value) {
        return applications.value;
      }
      return applications.value.filter(app =>
          app.title.toLowerCase().includes(searchQuery.value.toLowerCase())
      );
    });

    const selectApplication = (application) => {
      selectedApplication.value = application;
    };

    const approveApplication = (decision) => {
      // 这里应调用后端API进行审批操作
      console.log('Approval decision:', decision, 'Opinion:', approvalOpinion.value);
      // 重置审批模态框
      selectedApplication.value = null;
      approvalOpinion.value = '';
      signaturePassword.value = '';
    };

    const closeModal = () => {
      selectedApplication.value = null;
    };

    const searchApplications = () => {
      // 搜索逻辑
    };

    return {
      applications,
      searchQuery,
      filteredApplications,
      selectedApplication,
      approvalOpinion,
      signaturePassword,
      selectApplication,
      approveApplication,
      closeModal,
      searchApplications
    };
  }
};
</script>

<style scoped>
.approval-page {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

h1 {
  text-align: center;
  color: #333;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-bar label {
  margin-right: 10px;
  font-weight: bold;
}

.search-bar input,
.search-bar select {
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 120px;
}

.search-bar button {
  padding: 10px 20px;
  background-color: #5cb85c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-bar button:hover {
  background-color: #4cae4c;
}

.approval-list {
  margin-bottom: 20px;
}

.approval-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.approval-item button {
  padding: 5px 10px;
  margin-left: 10px;
  background-color: #f0ad4e;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.approval-item button:hover {
  background-color: #ec971f;
}

.approval-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
  overflow: auto;
}

.approval-modal h2 {
  margin-bottom: 15px;
}

.approval-modal .approval-details {
  margin-bottom: 20px;
}

.approval-modal .approval-details p {
  margin-bottom: 5px;
}

.approval-modal .signature-section {
  margin-top: 20px;
}

.approval-modal textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 20px;
}

.approval-modal button {
  margin-right: 10px;
  padding: 10px 20px;
  background-color: #5bc0de;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.approval-modal button:hover {
  background-color: #45b0e0;
}

.receipts img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* 隐藏某些元素的滚动条 */
.approval-modal::-webkit-scrollbar {
  display: none;
}
</style>